<template>
	<div class="meal-list">
		<section
			class="meal-item"
			v-for="type_entry in mealapi.meal_type"
			:key="type_entry.value">
			<div class="meal-title">
				<p>{{type_entry.label}}</p>
			</div>
			<div class="food-list">
				<section
					class="food-entry"
					v-for="(item, index) in getFood(type_entry.value)"
					:key="index">
					<FoodItem @click="props.update(item.id)" :food="item.food" :showUpdate="false" />
					<el-icon color="#fff" @click="props.del(item.id)">
						<CloseBold />
					</el-icon>
				</section>
			</div>
		</section>
	</div>
</template>

<script setup>
import { CloseBold } from '@element-plus/icons-vue'
import mealapi from '@/api/mealapi'
import FoodItem from '@/views/customer/food/components/fooditem'
const props = defineProps(['mealTypeVo', 'del', 'update'])
function getFood (typeCode) {
	for (const i in props.mealTypeVo) {
		if (typeCode === props.mealTypeVo[i].typeCode) {
			return props.mealTypeVo[i].foods
		}
	}
}
</script>

<style scoped lang="scss">
.meal-list {
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	.meal-item {
		display: flex;
		height: 350px;
		margin-top: 15px;
		.meal-title {
			background-color: #337AB7;
			color: #F3EBE9;
			width: 150px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			p {
				width: 16px;
			}
		}
		.food-list {
			display: flex;
			.food-entry {
				width: 250px;
				margin-left: 20px;
				position: relative;
				.food-item {
					height: 350px;
					::v-deep .el-image {
						cursor: pointer;
					}
				}
				.el-icon {
					position: absolute;
					top: 0px;
					right: 0px;
					cursor: pointer;
				}
			}
		}
	}
}
</style>